<template>
  <div class="page pb-60">
    <!-- 顶部栏 -->
    <Base-Navbar title="购物车"></Base-Navbar>

    <div class="container">
      <!-- Tab -->
      <div class="mb-10">
        <Base-Tab v-model:index="tabIndex"></Base-Tab>
      </div>

      <!-- Tab -->
      <div class="mb-10">
        <Base-Tab
          :type="2"
          :tabs="selects.orderStatus"
          v-model:index="tabIndex"
        ></Base-Tab>
      </div>

      <!-- 商品总数 -->
      <div class="flex flex-rr mb-10">
        <div class="cl-success">
          <span>商品总数：</span>
          <span>{{ shopcars.length }} 件</span>
        </div>
      </div>

      <!-- 购物车列表 -->
      <div class="box opacity">
        <ul class="list">
          <li class="item" v-for="(v, i) in shopcars" :key="i">
            <shopcar-item :v="v"></shopcar-item>
          </li>
        </ul>
      </div>
    </div>

    <!-- 底部栏 -->
    <div class="footer flex flex-cc flex-rb">
      <div>
        <van-checkbox-group
          shape="square"
          @click="onSelectedAllChange"
          v-model="selectedAll"
        >
          <van-checkbox name="all">
            <div class="cl-white">全选</div>
          </van-checkbox>
        </van-checkbox-group>
      </div>

      <div style="line-height: 1">
        <div>
          <span>已选：</span>
          <span>{{ selectedCount }} 件</span>
        </div>

        <div>
          <span>合计：</span>
          <span>{{ totalPrice }} U</span>
        </div>
      </div>

      <div class="flex">
        <van-button
          type="primary"
          plain
          :disabled="selectedCount === 0"
          @click="confirmShopcar"
        >
          支付
        </van-button>
        <van-button
          type="primary"
          :disabled="selectedCount === 0"
          @click="showDelConfirm"
        >
          <div class="cl-error">删除</div>
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import api from 'js/api'
import selects from 'js/selects'

import shopcarItem from './components/shopcar_item.vue'
import { showToast } from '../../common/js/utils'

const router = useRouter()

const tabIndex = ref(0)
const shopcars = ref([])

// 已选
const selecteds = computed(() => {
  return shopcars.value.filter((v) => v.selected)
})

const selectedCount = computed(() => {
  return selecteds.value.length
})

// 合计
const totalPrice = ref(0)

// 全选
const selectedAll = ref([])

watch(
  () => shopcars.value,
  () => {
    let total = 0

    shopcars.value
      .filter((v) => v.selected)
      .forEach((v) => {
        total += v.price * v.count
      })

    totalPrice.value = total.toFixed(2)

    let all = []

    if (
      shopcars.value.length === shopcars.value.filter((v) => v.selected).length
    ) {
      all = ['all']
    }

    selectedAll.value = all
  },
  {
    immediate: true,
    deep: true,
  }
)

getShopcarList()

// 获取购物车列表
async function getShopcarList() {
  const { code, data } = await api.getShopcarList()

  if (code === 1) {
    data.forEach((v) => {
      v.selected = true
      v.count = v.nums
      v.price = Number(v.subtotal)
    })

    shopcars.value = data
  }
}

// 删除购物车
async function delShopcar() {
  const params = {
    id: selecteds.value.map((v) => v.id).join(','),
  }

  const { code } = await api.delShopcar(params)

  if (code === 1) {
    getShopcarList()
  }
}

// 结算购物车
async function confirmShopcar() {
  const params = {
    ids: selecteds.value.map((v) => v.id).join(','),
  }

  const { code, data } = await api.confirmShopcar(params)

  if (code === 1) {
    router.push(`/order/pay?id=${data}`)
  }
}

// 显示删除
function showDelConfirm() {
  showConfirmDialog({
    title: '消息提示',
    message: '确认需要删除选中的商品？',
  }).then(() => {
    delShopcar()
  })
}

// 全选
function onSelectedAllChange() {
  shopcars.value.forEach((v) => {
    v.selected = !!selectedAll.value.length
  })
}
</script>

<style lang="scss" scoped>
.footer {
  padding: 10px 30px;
  bottom: 50px;

  :deep(.van-button) {
    width: 60px !important;
    min-width: unset !important;
    padding: 0;
  }
}
</style>
